<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <!-- 	https://cdnjs.cloudflare.com/ajax/libs/jsencrypt/3.0.0-rc.1/jsencrypt.min.js  加密 -->
    <link rel="icon" type="image/svg+xml" href="https://statics.brae.co/bounty/logo.png" />
    <link rel="stylesheet" href="https://posp.yflishuapartner.com/public/layui/css/layui.css">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>设备编号查询</title>
    <style>
        .outer {
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #F5F5F5;
            min-height: 100vh
        }

        .qr_code {
            height: 42.66vw;
            width: 42.66vw;
            margin-top: 5.33vw;
            align-self: center;
        }

        .content_title {
            margin-top: 5.33vw;
            font-size: 3.73vw;
            line-height: 5.33vw;
        }

        .content_device_title {
            margin-top: 6px;
            font-size: 3.73vw;
            line-height: 5.33vw;
        }

        #btn {
            margin-top: 5.33vw;
            border-radius: 8px;
            background: linear-gradient(#45CAFF, #038FFF) !important;
            border: none;
            width: 53.33vw;
        }

        .divider {
            height: 1px;
            align-self: stretch;
            content: '';
            background-color: #D3D3D3;
            margin: 5.33vw;
        }

        .tips {
            align-self: stretch;
            margin: 5.33vw;
        }

        .service_outline {
            margin-top: 5.33vw;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .service_content {

            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .service_img {
            height: 24vw;
            width: 24vw;
        }

        .service_img2 {
            height: 24vw;
            width: 24vw;
        }

        .title {
            font-size: 3.2vw;
            line-height: 4.53vw;
            margin-top: 4px;
            color: #666666;
        }
    </style>
</head>

<body>
    <div class="outer">
        <img src="https://statics.brae.co/codeCard.png" class="qr_code">

        <span id="content_title" class="content_title">立牌设备编号：--</span>
        <span class="content_device_title">设备SN号：--</span>

        <button type="button" class="layui-btn layui-btn-normal" id="btn">复制SN号</button>
        <div class="divider">
            <!-- 条款展示 -->
            <div class="tips" style="color: #666666;font-size:3.733vw; line-height: 5.33vw;">
                <p>
                    1. 请先扫描实体立牌正面二维码，注册商户账号并下载商户APP；
                </p>
                <p>
                    2. 登录商户APP，按照指引进行实名认证；
                </p>
                <p>
                    3. 按照指引，<span style="color: #FF6464;"> 填写上方复制的“SN号”绑定码牌使用； </span>
                </p>
                <p>
                    4. 如有问题，请扫下方二维码咨询。
                </p>
            </div>
            <!--  -->
            <div class="service_outline">
                <div class="service_content">
                    <img src="https://statics.brae.co/publicNumber.png" alt="显示异常" class="service_img">
                    <span class="title">公众号</span>
                </div>
                <div class="service_content" style="margin-left: 11.73vw;">
                    <img src="https://statics.brae.co/serviceProvider.png" alt='显示异常' class="service_img2">
                    <span class="title">客服微信</span>
                </div>
            </div>
        </div>
        <script>
            const handleError = () => {
                // 需要将script 标签 拆分开
                document.write('<scr' + 'ipt src="https://posp.yflishuapartner.com/public/layui/layui.js"></scr' + 'ipt>')
            }
        </script>
        <script src=" https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/layui.min.js" onerror="handleError()"></script>
        <script>
            let layer = layui.layer
            /** 获取参数 路由上的参数 */
            function getLocationSearch() {
                /** post 参数返回对象 */
                const search = window.location.search.slice(1);
                const params = {};
                if (search) {
                    const searchArray = search.split("&");
                    if (Array.isArray(searchArray) && searchArray.length) {
                        searchArray.forEach((pair) => {
                            const [key, value] = pair.split("=");
                            if (key) params[key] = value;
                        });
                    }
                }
                return params;
            }
            const codeMessage = {
                200: "服务器成功返回请求的数据。",
                201: "新建或修改数据成功。",
                202: "一个请求已经进入后台排队（异步任务）。",
                204: "删除数据成功。",
                400: "发出的请求有错误，服务器没有进行新建或修改数据的操作。",
                401: "用户没有权限（令牌、用户名、密码错误）。",
                403: "用户得到授权，但是访问是被禁止的。",
                404: "发出的请求针对的是不存在的记录，服务器没有进行操作。",
                406: "请求的格式不可得。",
                410: "请求的资源被永久删除，且不会再得到的。",
                422: "当创建一个对象时，发生一个验证错误。",
                500: "服务器发生错误，请检查服务器。",
                502: "网关错误。",
                503: "服务不可用，服务器暂时过载或维护。",
                504: "网关超时。",
            };
            /** 异常处理程序 */
            const errorHandler = (error) => {
                console.log(error)
                const { response } = error;
                if (response && response.status) {
                    const errorText = codeMessage[response.status] || response.statusText;

                    layer.msg(errorText);
                } else if (!response) {
                    layer.msg("您的网络发生异常，无法连接服务器");
                }
                return Promise.reject(response);
            };


            function request(url, data = {}) {
                const header = new Headers({
                    "Content-Type": "application/json",
                })
                const body = JSON.stringify({
                    data,
                });

                return fetch(url, {
                    headers: header,
                    method: "POST",
                    body,
                    credentials: "include",
                })
                    .then((resp) => resp.json())
                    .catch((error) => errorHandler(error))
                    .then((resp) => {
                        if (resp.code === 200 && resp.enmsg === "ok") {
                            return resp.data;
                        }
                        if (resp.cnmsg) {

                            layer.msg(resp.cnmsg);
                        }
                        return Promise.reject(resp);
                    });
            }

            /** 获取设备数据*/
            function loadDeviceData() {
                const params = getLocationSearch()
                return request(`/codecard/get`, params);
            }


            const userAgentLowerCase = window.navigator.userAgent.toLowerCase();
            const isIos = /(iphone|ipad|ipod|ios)/.test(userAgentLowerCase);

            /** 复制 */
            const copyToClipboard = (text = '') => {
                const textString = text.toString();
                const textarea = document.createElement("textarea");
                textarea.setAttribute("style", "width: 0; height: 0;");
                textarea.innerHTML = textString;
                document.body.appendChild(textarea);

                if (isIos) {
                    const range = document.createRange();
                    range.selectNode(textarea);
                    const selection = window.getSelection();
                    // 如果当前已有选中则先移除
                    if (selection?.rangeCount && selection.rangeCount > 0)
                        selection.removeAllRanges();
                    selection?.addRange(range);
                } else {
                    textarea.select();
                }

                document.execCommand("copy");
                document.body.removeChild(textarea);
            };
        </script>
        <script>
            layui.use(['layer'], function () {
                var layer = layui.layer
                let sn, device_name

                loadDeviceData().then(res => {
                    sn = res?.sn
                    device_name = res?.device_name
                    const ele = document.getElementById('content_title')
                    ele.innerText = `立牌设备编号：${device_name}`
                    const ele1 = document.querySelector('.content_device_title')
                    ele1.innerText = `设备SN号：${sn}`

                })
                const element = document.getElementById('btn')
                element.addEventListener('click', function () {
                    if (sn) {
                        copyToClipboard(sn)
                        layer.msg('复制成功');
                    } else {
                        layer.msg('暂无SN');
                    }

                });
            });
        </script>
</body>

</html>